<template>
  <ButtonGroup size="small" >
      <!-- 水平居中 -->
      <Button v-show="mSelectMode" @click="position('centerH')"><img src="../assets/icons/centerX.png" width="14" height="14"/></Button>
      <!-- 水平垂直居中 -->
      <Button v-show="mSelectMode" @click="position('center')"><img src="../assets/icons/center.png" width="14" height="14"/></Button>
      <!-- 垂直居中 -->
      <Button v-show="mSelectMode" @click="position('centerV')"><img src="../assets/icons/cenetrY.png" width="14" height="14"/></Button>
  </ButtonGroup>
</template>

<script>
import select from '@/mixins/select'

export default {
  name: 'ToolBar',
  mixins: [select],
  data() {
    return {
    };
  },
  created(){
  },
  methods:{
    position(name){
      const activeObject = this.canvas.c.getActiveObject()
      if(activeObject){
        //name:
        //centerH
        //center
        //centerV
        activeObject[name]()
        this.canvas.c.renderAll()
      }
    }
  }
};
</script>
<style scoped lang="less">
/deep/ .ivu-btn[disabled]{
  img{ opacity: 0.2;}
}
img{
  vertical-align: text-bottom;
}
</style>
